<template>
  <div>
    <p>倒计时：{{ step }}</p>
  </div>
</template>

<script>
export default {
  props: {
    // 和['step']一样，直接写成['step']也是可以的，不过这种写法更清晰（指类型和默认值） ok
    step: {
      type: Number,
      default: 10,
    },
  },
  data() {
    return {
      itv: null,
    };
  },

  mounted() {
    this.itv = setInterval(() => {
      if (--this.step === 0) {
        this.$emit("end");
        clearInterval(this.itv);
        this.itv = null;
      }
    }, 1000);
  },
  destroyed() {
    if (this.itv) {
      clearInterval(this.itv);
    }
  },
};
</script>

<style></style>
